<template>
  <div style="padding: 20px 0;">
    <el-input v-model="keyword" style="width: 240px;height: 40px" placeholder="请输入车牌号" />
    <el-button style="margin-left: 20px" type="primary" size="large" @click="search">查询</el-button>
    <el-button style="margin-left: 20px" type="primary" size="large" @click="reset">重置</el-button>
  </div>
  <el-table :data="tableData.data" style="width: 100%">
    <el-table-column prop="carNo" label="车牌号码" width="180" />
    <el-table-column prop="domainName" label="控点名称" width="180" />
    <el-table-column prop="eventType" label="事件类型" />
    <el-table-column prop="eventDt" label="触发时间" />
    <el-table-column prop="cardType" label="证件类型" />
    <el-table-column prop="inOutTag" label="进出标识" />
    <el-table-column prop="staffId" label="关联编号" />
  </el-table>
  <div style="margin-top: 30px">
    <el-pagination background layout="prev, pager, next" :page-size="15" :total="pageTotal" @current-change="currentChange"/>
  </div>
</template>

<script setup>
import { ref,reactive } from "vue";
import {_getCertFlowList} from "../../http/api.js";
import {ElLoading, ElMessage} from "element-plus";

const tableData = reactive({
  data:[]
})
//关键字
const keyword = ref('');
const pageTotal = ref(0);
const current = ref(1);
// 获取列表
const getCertFlowList = (keyword) => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  let params = {
    current: current.value,
    size: 15
  }
  if(keyword) {
    params['carNo'] = keyword;
  }
  _getCertFlowList(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let data = res.data.data;
          let records = data.records;
          pageTotal.value = data.total;
          tableData.data = records;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
getCertFlowList()
//查询点击
const search = () => {
  if(!keyword.value) return ElMessage({message: '请选择查询条件', type: 'warning' });
  getCertFlowList(keyword.value)
}
// 重置
const reset = () => {
  keyword.value = '';
  getCertFlowList()
}
// 分页点击
const currentChange = (index) => {
  current.value = index;
  getCertFlowList(keyword.value)
}
</script>

<style scoped lang="scss">

</style>